<template>
    <div>
        
        <input type="text" v-model.trim="ipt" @input="print">
        <div v-if="current == 'init'" class="init">
            <!-- 初始数据部分 -->
            <h2 v-if="info.historyData.length">历史记录<button @click="del">删除</button></h2>
            
            <div v-for="item in info.historyData" :key="item.id">
                {{ item.keyword   }}
            </div>  
        </div>
        <div v-else-if="current == 'notice'" class="notice">
            <!-- 用于展示提示部分 -->
            提示
            <ul>
                <li v-for="item in tips" :key="item.id" @click="goGoods(item.name)">
                    {{ item.name  }}
                </li>
            </ul>
        </div>
        <div v-else class="goods">
            <!-- 用于展示商品部分 -->
            商品
            <ul>
                <li v-for="item in goods" :key="item.id">
                    {{ item.name  }}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import {
    indexaction,
    helperaction,
    addhistoryaction,
    clearhistoryAction
} from "@/api/home/search"
export default {
    data() {
        return {
            current:"init", // current   init/notice/goods
            info:{},
            ipt:"",
            tips:[] ,// 提示部分
            goods:[] // 商品部分
        };
    },
    watch:{
        ipt(){
            // console.log("watch监听")
        }
    },
    computed: {

    },
    async created() {
        this.init()
        
    },
    mounted() {

    },
    methods: {
        async init(){
            var res = await indexaction({
                openId:localStorage.getItem("openId")
            })
            console.log(res)
            this.info = res
        },
        del(){
            clearhistoryAction({
                openId:localStorage.getItem("openId")
            })
            .then(res =>{
                console.log(res)
                this.init()
            })
        },
        goGoods(val){
            this.current = "goods"
            helperaction({
                keyword:val,
                order:""
            }).then(res =>{
                console.log(res)
                this.goods = res.keywords
            })
            addhistoryaction({
                keyword:val,
                openId:localStorage.getItem("openId")
            })
        },
        print(){
            if(!this.ipt){
                this.current = "init"
                return
            }
            // console.log(1)
            this.current = "notice"
            helperaction({
                keyword:this.ipt,
                order:""
            })
            .then(res =>{
                console.log(res)
                this.tips = res.keywords
            })
        }
    },
};
</script>

<style scoped lang="scss">

</style>
